<template>
  <div :style="{height: height}">
    <div class="personHead">
      <div class="img">
        <img src="static/images/person/head.png" alt="" @click="toPersonModify" >
      </div>
      <div class="info">
        <div class="alias">
          奔跑的土豆
        </div>
        <div class="namePhone">
          <div class="name">
            <div class="img">
              <img src="static/images/person/icon_name2x.png" alt="">
            </div>
            <span>诸葛峰</span>
          </div>
          <div class="name">
            <div class="img">
              <img src="static/images/person/icon_phone2x.png" alt="">
            </div>
            <span>15678905634</span>
          </div>
        </div>
      </div>
    </div>
    <div class="personDescribe">
      <div class="item">
        <img src="static/images/person/icon_message.png" alt="">
        <span class="describe" @click="toAgree">我的点赞</span>
        <span class="count">86</span>
        <img src="static/images/person/icon_next step.png" alt="">
      </div>
      <div class="item">
        <img src="static/images/person/icon_location.png" alt="">
        <span class="describe" @click="toCollection">我的收藏</span>
        <span class="count">12</span>
        <img src="static/images/person/icon_next step.png" alt="">
      </div>
      <div class="item">
        <img src="static/images/person/icon_comment.png" alt="">
        <span class="describe" @click="toComment">我的评论</span>
        <span class="count">56</span>
        <img src="static/images/person/icon_next step.png" alt="">
      </div>
    </div>
    <div class="personFooter">
      <Footer :isPerson="isPerson"></Footer>
    </div>
  </div>

</template>

<script>
import Footer from "../../components/Footer";
export default {
  name: "Personal",
  components:{Footer},
  data() {
    return {
      height:0,//页面默认高度
      isPerson:true,//表明是否是个人页,影响到底部按钮的颜色
    }
  },
  methods:{
    //点击头像跳转到个人信息修改页面
    toPersonModify(){
      this.$router.push('/personModify')
    },
    //点击收藏跳转到收藏页面
    toCollection(){
      this.$router.push('/collection')
    },
    //点击评论 跳转到评论页面
    toComment(){
      this.$router.push('/comment')
    },
    //点击点赞 跳转到点赞页面
    toAgree(){
      this.$router.push('/agree')
    },

  },
  created() {
    this.height=document.documentElement.clientHeight+"px"
  }
}
</script>

<style lang="less" scoped>
div{
  width: 375px;
  //height: 100%;//用100%的方式也可以,用js计算的方法也可以;最外面的app元素必须用js计算高度.顾统一用js计算高度
  //background-color: pink;
  padding: 0;
  .personHead{
    width: 375px;
    height: 160px;
    //background-color: white;
    padding: 10px ;
    display: flex;
    .img{
      width: 140px;
      height: 140px;
      //background-color: gold;
      display: inline-block;
      padding: 0;
      img{
        width: 140px;
        height: 140px;
      }
    }
    .info{
      width: 225px;
      height: 140px;
     // background-color: lawngreen;
      display: inline-block;
      padding-left: 10px;
      .alias{
        width: 205px;
        height: 40px;
        //background-color: lavenderblush;
        padding: 0;
        margin-top: 10px;
        font-size: 20px;
        font-weight: 600;
      }
      .namePhone{
        width: 205px;
        height: 100px;
        //background-color: lemonchiffon;
        padding: 20px 0 0 0;
        .name{
          width: 205px;
          height: 30px;
          //background-color: lightgray;
          display: flex;
          padding: 0px;
          .img{
            width: 30px;
            height: 30px;
            //background-color: lightcoral;
            padding: 2px;
            img{
              width: 26px;
              height: 26px;
             // border: 1px gray dashed;
            }
          }
          span{
            width: 175px;
            height: 30px;
            line-height: 30px;
           // background-color: lightgreen;
            display: inline-block;
            padding-left: 10px;
            font-size: 16px;
            color: gray;
          }
        }
        .phone{
          width: 205px;
          height: 30px;
         // background-color: lightskyblue;
        }
      }
    }
  }
  .personDescribe{
    width: 375px;
    height:69%;
   // background-color: lightgray;
    border-top: 4px solid lightgray;
    padding: 0 10px;

    .item{
      width: 355px;
      height: 52px;
      line-height: 52px;
      //background-color: lightgreen;
      display: flex;
      //justify-content: center;//块元素x方向居中对齐
      align-items: center;//块元素x放心左对齐,上下居中
      //border-bottom: 1px gray solid;
      img{
        width: 20px;
        height: 20px;
        //border: 1px gray dashed;
        display: inline-block;
      }
      .describe{
        width: 260px;
        font-size: 20px;
        padding-left: 10px;
      }
      .count{
        width: 50px;
        font-size: 16px;
        color: gray;
        text-align: right;
      }
    }
  }
  .personFooter{
    width: 3575px;
    height: 63px;
    background-color: white;
    position: fixed;
    bottom: 0;
    border-top: 4px solid lightgray;

  }
}
</style>
